<template>
    <vBreadcrumbVue></vBreadcrumbVue>
    <div class="basic-detail bgfff">
        <a-row :gutter="[0, 16]">
            <a-card>
                <a-descriptions title="退款申请" :size="'small'">
                    <a-descriptions-item label="取货单号">1000000000</a-descriptions-item>
                    <a-descriptions-item label="状态">已取货</a-descriptions-item>
                    <a-descriptions-item label="销售单号">1234123421</a-descriptions-item>
                    <a-descriptions-item label="子订单">3214321432</a-descriptions-item>
                </a-descriptions>
                <a-divider></a-divider>
                <a-descriptions title="用户信息" :size="'small'">
                    <a-descriptions-item label="用户姓名">付小小</a-descriptions-item>
                    <a-descriptions-item label="联系电话">18100000000</a-descriptions-item>
                    <a-descriptions-item label="常用快递">菜鸟仓储</a-descriptions-item>
                    <a-descriptions-item label="取货地址">浙江省杭州市西湖区万塘路18号</a-descriptions-item>
                </a-descriptions>
                <a-divider></a-divider>
                <div class="title">退货进度</div>
                <div style="margin-bottom: 24px;">
                    <a-table :pagination="false" :dataSource="dataSource" :columns="columns">
                    </a-table>
                </div>

                <div class="title">退货进度</div>
                <a-table :pagination="false" :dataSource="dataSource" :columns="columns">
                    <template #summary>
                        <a-table-summary-row>
                            <a-table-summary-cell>总计</a-table-summary-cell>
                            <a-table-summary-cell :col-span="3"></a-table-summary-cell>
                            <a-table-summary-cell>
                                <a-typography-text type="danger">{{ total.totalnum }}</a-typography-text>
                            </a-table-summary-cell>
                            <a-table-summary-cell>
                                <a-typography-text type="danger">{{ total.totalprice }}</a-typography-text>
                            </a-table-summary-cell>
                        </a-table-summary-row>
                    </template>
                </a-table>
            </a-card>
        </a-row>
    </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, ref, toRaw, watch, computed } from 'vue';
import Icon, { FullscreenOutlined } from '@ant-design/icons-vue';
import { post } from '@/services/api/request';
const dataSource = [{
    id: 'adfasf',
    goodName: '矿泉水 550ml',
    code: 'asdfsafsf',
    unitPrice: '3000',
    num: '20',
    price: '2200'
}, {
    id: 'adfasf',
    goodName: '矿泉水 550ml',
    code: 'asdfsafsf',
    unitPrice: '3000',
    num: '20',
    price: '2200'
}, {
    id: 'adfasf',
    goodName: '矿泉水 550ml',
    code: 'asdfsafsf',
    unitPrice: '3000',
    num: '20',
    price: '2200'
}, {
    id: 'adfasf',
    goodName: '矿泉水 550ml',
    code: 'asdfsafsf',
    unitPrice: '3000',
    num: '20',
    price: '2200'
}, {
    id: 'adfasf',
    goodName: '矿泉水 550ml',
    code: 'asdfsafsf',
    unitPrice: '3000',
    num: '20',
    price: '2200'
},]
const columns = ref([
    {
        title: '商品编号',
        dataIndex: 'id',

    },
    {
        title: '商品名称',
        dataIndex: 'goodName',

    },
    {
        title: '商品条码',
        dataIndex: 'code',

    },
    {
        title: '单价',
        dataIndex: 'unitPrice',
    }, {
        title: '数量（件）	',
        dataIndex: 'num',
    }, {
        title: '金额',
        dataIndex: 'price',
    }
])

const total = computed(() => {
    let totalnum = 0;
    let totalprice = 0;
    dataSource.forEach((res) =>{
        totalnum = totalnum + Number(res.num)
        totalprice = totalprice + Number(res.price)
    })
    return {totalnum,totalprice}
})
</script>

<style scoped>
.title {
    margin-bottom: 16px;
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
    font-size: 16px;
}
</style>